<template>
  <div class="form-module">
    <el-form
      ref="elFormRef"
      :label-width="formConfig.labelWidth || '100px'"
      :label-position="formConfig.labelPosition || 'left'"
      :size="formConfig.size || 'default'"
      :rules="formConfig.rules || []"
      :model="modelValue"
    >
      <el-row :gutter="10">
        <el-col
          v-for="item in formModuletems"
          v-bind="item.colLayout ?? defaultColLayout"
          :key="item.label"
        >
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :prop="item.param"
          >
            <el-input
              v-if="item.type === 'input'"
              :placeholder="item.placeholder"
              :model-value="modelValue[`${item.param}`]"
              @update:modelValue="changeFormData($event, item.param)"
            ></el-input>
            <el-select
              v-if="item.type === 'select'"
              :placeholder="item.placeholder"
              :model-value="modelValue[`${item.param}`]"
              @update:modelValue="changeFormData($event, item.param)"
            >
              <el-option
                v-for="option in item.selectOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.type === 'datePicker'"
              v-bind="item.datePickerProp"
              :model-value="modelValue[`${item.param}`]"
              @update:modelValue="changeFormData($event, item.param)"
            />
          </el-form-item>
        </el-col>
        <slot name="control-btn"></slot>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import { ElForm } from "element-plus";
import { IFormModuleType, IFormConfigType, IColLayoutType } from "../type/type";

export default defineComponent({
  emits: ["update:modelValue"],
  props: {
    formModuletems: {
      type: Array as PropType<IFormModuleType[]>,
      default: () => []
    },
    formConfig: {
      type: Object as PropType<IFormConfigType>,
      default: () => ({})
    },
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const changeFormData = (value: any, param: string) => {
      emit("update:modelValue", { ...props.modelValue, [param]: value });
    };
    const defaultColLayout: IColLayoutType = {
      xl: 6,
      lg: 6,
      md: 8,
      sm: 12,
      xs: 24
    };
    const elFormRef = ref<InstanceType<typeof ElForm>>();
    return { changeFormData, defaultColLayout, elFormRef };
  }
});
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
</style>
